<template>
  <view class="page">
    <view class="title">
      <view class="point"></view>
      <view class="text">我的刷题</view>
    </view>
    <view class="list">
      <view
        class="item"
        v-for="item in paperClassList"
        :key="item.classId"
        @click="
          () =>
            $uni.navigateTo({
              url: handleUrlParams('/pages/mine/myDoingRecord/paperList', {
                classId: item.classId,
                className: item.className,
              }),
            })
        "
      >
        <image class="icon" :src="getShowImage(item.classIco)"></image>
        <view class="title">{{ item.className }}</view>
        <view class="right-arrow">&gt;</view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"

export default {
  methods: { handleUrlParams, getShowImage },
  data() {
    return {
      paperClassList: [], //试卷分类列表
    }
  },
  onLoad() {
    request({
      url: "topicClass/page",
      data: {
        current: 1,
        size: -1,
      },
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.paperClassList = data.records
      console.log(this.paperClassList, "this.paperClassList")
    })
  },
}
</script>

<style scoped lang="scss">
.page {
  padding: 20rpx;
  background: var(--gray-background-color);
  min-height: 100vh;
  > .title {
    display: flex;
    align-items: center;
    > .point {
      background: #00b3a8;
      width: 10rpx;
      height: 32rpx;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
    }
    > .text {
      margin-left: 14rpx;
      font-size: 34rpx;
      font-weight: 500;
    }
  }
  > .list {
    > .item {
      margin-top: 28rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      background: var(--background-color);
      padding: 26rpx 30rpx;
      display: flex;
      align-items: center;
      > .icon {
        width: 101.52rpx;
        height: 132.84rpx;
      }
      > .title {
        margin-left: 46rpx;
        font-size: 30rpx;
        font-weight: 500;
        width: 0;
        flex: 1;
      }
      > .right-arrow {
        margin-left: 20rpx;
        font-size: 40rpx;
      }
    }
  }
}
</style>
